<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学校课程管理系统</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f9;
    }

    .tab-container {
      background-color: #333;
      overflow: hidden;
    }

    .tab {
      float: left;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      cursor: pointer;
    }

    .tab:hover {
      background-color: #ddd;
      color: black;
    }

    .tab.active {
      background-color: #4CAF50;
      color: white;
    }

    .content {
      padding: 20px;
      display: none;
    }

    .content.active {
      display: block;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th,
    td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #4CAF50;
      color: white;
    }

    input[type=text],
    input[type=number] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    button {
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background-color: #45a049;
    }

    #chart-container {
      width: 100%;
      height: 400px;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
<div class="tab-container">
  <div class="tab" onclick="openTab('home')">首页</div>
  <div class="tab" onclick="openTab('courses')">课程管理</div>
  <div class="tab" onclick="openTab('teachers')">教师管理</div>
  <div class="tab" onclick="openTab('students')">学生管理</div>
  <div class="tab" onclick="openTab('classrooms')">教室管理</div>
</div>

<div id="home" class="content active">
  <h2>首页</h2>
  <div id="chart-container">
    <canvas id="myChart"></canvas>
  </div>
</div>

<div id="courses" class="content">
  <h2>课程管理</h2>
  <input type="text" id="course-name" placeholder="课程名称">
  <input type="number" id="course-credits" placeholder="课程学分">
  <button onclick="addCourse()">添加课程</button>
  <table id="course-table">
    <thead>
    <tr>
      <th>课程名称</th>
      <th>课程学分</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<div id="teachers" class="content">
  <h2>教师管理</h2>
  <input type="text" id="teacher-name" placeholder="教师姓名">
  <input type="text" id="teacher-subject" placeholder="教授科目">
  <button onclick="addTeacher()">添加教师</button>
  <table id="teacher-table">
    <thead>
    <tr>
      <th>教师姓名</th>
      <th>教授科目</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<div id="students" class="content">
  <h2>学生管理</h2>
  <input type="text" id="student-name" placeholder="学生姓名">
  <input type="number" id="student-age" placeholder="学生年龄">
  <button onclick="addStudent()">添加学生</button>
  <table id="student-table">
    <thead>
    <tr>
      <th>学生姓名</th>
      <th>学生年龄</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<div id="classrooms" class="content">
  <h2>教室管理</h2>
  <input type="text" id="classroom-number" placeholder="教室编号">
  <input type="number" id="classroom-capacity" placeholder="教室容量">
  <button onclick="addClassroom()">添加教室</button>
  <table id="classroom-table">
    <thead>
    <tr>
      <th>教室编号</th>
      <th>教室容量</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<script>
  // 初始化数据
  let courses = JSON.parse(localStorage.getItem('courses')) || [
    { name: '数学', credits: 4 },
    { name: '英语', credits: 3 },
    { name: '物理', credits: 4 },
    { name: '化学', credits: 3 },
    { name: '生物', credits: 3 },
    { name: '历史', credits: 2 },
    { name: '地理', credits: 2 },
    { name: '政治', credits: 2 },
    { name: '体育', credits: 1 },
    { name: '音乐', credits: 1 }
  ];
  let teachers = JSON.parse(localStorage.getItem('teachers')) || [
    { name: '张老师', subject: '数学' },
    { name: '王老师', subject: '英语' },
    { name: '李老师', subject: '物理' },
    { name: '赵老师', subject: '化学' },
    { name: '刘老师', subject: '生物' },
    { name: '陈老师', subject: '历史' },
    { name: '杨老师', subject: '地理' },
    { name: '吴老师', subject: '政治' },
    { name: '孙老师', subject: '体育' },
    { name: '周老师', subject: '音乐' }
  ];
  let students = JSON.parse(localStorage.getItem('students')) || [
    { name: '张三', age: 18 },
    { name: '李四', age: 17 },
    { name: '王五', age: 18 },
    { name: '赵六', age: 17 },
    { name: '孙七', age: 18 },
    { name: '周八', age: 17 },
    { name: '吴九', age: 18 },
    { name: '郑十', age: 17 },
    { name: '王十一', age: 18 },
    { name: '李十二', age: 17 }
  ];
  let classrooms = JSON.parse(localStorage.getItem('classrooms')) || [
    { number: '101', capacity: 50 },
    { number: '102', capacity: 50 },
    { number: '201', capacity: 60 },
    { number: '202', capacity: 60 },
    { number: '301', capacity: 70 },
    { number: '302', capacity: 70 },
    { number: '401', capacity: 80 },
    { number: '402', capacity: 80 },
    { number: '501', capacity: 90 },
    { number: '502', capacity: 90 }
  ];

  // 保存数据到本地存储
  function saveData() {
    localStorage.setItem('courses', JSON.stringify(courses));
    localStorage.setItem('teachers', JSON.stringify(teachers));
    localStorage.setItem('students', JSON.stringify(students));
    localStorage.setItem('classrooms', JSON.stringify(classrooms));
  }

  // 打开标签页
  function openTab(tabName) {
    let i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName('content');
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = 'none';
    }
    tablinks = document.getElementsByClassName('tab');
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(' active', '');
    }
    document.getElementById(tabName).style.display = 'block';
    document.querySelector(`.tab[onclick="openTab('${tabName}')"]`).className += ' active';
    if (tabName === 'home') {
      renderChart();
    } else if (tabName === 'courses') {
      renderCourses();
    } else if (tabName === 'teachers') {
      renderTeachers();
    } else if (tabName === 'students') {
      renderStudents();
    } else if (tabName === 'classrooms') {
      renderClassrooms();
    }
  }

  // 渲染图表
  function renderChart() {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['课程数量', '教师数量', '学生数量', '教室数量'],
        datasets: [{
          label: '数量统计',
          data: [courses.length, teachers.length, students.length, classrooms.length],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }

  // 渲染课程表格
  function renderCourses() {
    const table = document.getElementById('course-table').getElementsByTagName('tbody')[0];
    table.innerHTML = '';
    courses.forEach((course, index) => {
      const row = table.insertRow();
      const cell1 = row.insertCell(0);
      const cell2 = row.insertCell(1);
      const cell3 = row.insertCell(2);
      cell1.innerHTML = course.name;
      cell2.innerHTML = course.credits;
      cell3.innerHTML = `<button onclick="editCourse(${index})">编辑</button> <button onclick="deleteCourse(${index})">删除</button>`;
    });
  }

  // 添加课程
  function addCourse() {
    const name = document.getElementById('course-name').value;
    const credits = parseInt(document.getElementById('course-credits').value);
    if (name && credits) {
      courses.push({ name, credits });
      saveData();
      renderCourses();
      document.getElementById('course-name').value = '';
      document.getElementById('course-credits').value = '';
    }
  }

  // 编辑课程
  function editCourse(index) {
    const newName = prompt('请输入新的课程名称', courses[index].name);
    const newCredits = parseInt(prompt('请输入新的课程学分', courses[index].credits));
    if (newName && newCredits) {
      courses[index].name = newName;
      courses[index].credits = newCredits;
      saveData();
      renderCourses();
    }
  }

  // 删除课程
  function deleteCourse(index) {
    if (confirm('确定要删除该课程吗？')) {
      courses.splice(index, 1);
      saveData();
      renderCourses();
    }
  }

  // 渲染教师表格
  function renderTeachers() {
    const table = document.getElementById('teacher-table').getElementsByTagName('tbody')[0];
    table.innerHTML = '';
    teachers.forEach((teacher, index) => {
      const row = table.insertRow();
      const cell1 = row.insertCell(0);
      const cell2 = row.insertCell(1);
      const cell3 = row.insertCell(2);
      cell1.innerHTML = teacher.name;
      cell2.innerHTML = teacher.subject;
      cell3.innerHTML = `<button onclick="editTeacher(${index})">编辑</button> <button onclick="deleteTeacher(${index})">删除</button>`;
    });
  }

  // 添加教师
  function addTeacher() {
    const name = document.getElementById('teacher-name').value;
    const subject = document.getElementById('teacher-subject').value;
    if (name && subject) {
      teachers.push({ name, subject });
      saveData();
      renderTeachers();
      document.getElementById('teacher-name').value = '';
      document.getElementById('teacher-subject').value = '';
    }
  }

  // 编辑教师
  function editTeacher(index) {
    const newName = prompt('请输入新的教师姓名', teachers[index].name);
    const newSubject = prompt('请输入新的教授科目', teachers[index].subject);
    if (newName && newSubject) {
      teachers[index].name = newName;
      teachers[index].subject = newSubject;
      saveData();
      renderTeachers();
    }
  }

  // 删除教师
  function deleteTeacher(index) {
    if (confirm('确定要删除该教师吗？')) {
      teachers.splice(index, 1);
      saveData();
      renderTeachers();
    }
  }

  // 渲染学生表格
  function renderStudents() {
    const table = document.getElementById('student-table').getElementsByTagName('tbody')[0];
    table.innerHTML = '';
    students.forEach((student, index) => {
      const row = table.insertRow();
      const cell1 = row.insertCell(0);
      const cell2 = row.insertCell(1);
      const cell3 = row.insertCell(2);
      cell1.innerHTML = student.name;
      cell2.innerHTML = student.age;
      cell3.innerHTML = `<button onclick="editStudent(${index})">编辑</button> <button onclick="deleteStudent(${index})">删除</button>`;
    });
  }

  // 添加学生
  function addStudent() {
    const name = document.getElementById('student-name').value;
    const age = parseInt(document.getElementById('student-age').value);
    if (name && age) {
      students.push({ name, age });
      saveData();
      renderStudents();
      document.getElementById('student-name').value = '';
      document.getElementById('student-age').value = '';
    }
  }

  // 编辑学生
  function editStudent(index) {
    const newName = prompt('请输入新的学生姓名', students[index].name);
    const newAge = parseInt(prompt('请输入新的学生年龄', students[index].age));
    if (newName && newAge) {
      students[index].name = newName;
      students[index].age = newAge;
      saveData();
      renderStudents();
    }
  }

  // 删除学生
  function deleteStudent(index) {
    if (confirm('确定要删除该学生吗？')) {
      students.splice(index, 1);
      saveData();
      renderStudents();
    }
  }

  // 渲染教室表格
  function renderClassrooms() {
    const table = document.getElementById('classroom-table').getElementsByTagName('tbody')[0];
    table.innerHTML = '';
    classrooms.forEach((classroom, index) => {
      const row = table.insertRow();
      const cell1 = row.insertCell(0);
      const cell2 = row.insertCell(1);
      const cell3 = row.insertCell(2);
      cell1.innerHTML = classroom.number;
      cell2.innerHTML = classroom.capacity;
      cell3.innerHTML = `<button onclick="editClassroom(${index})">编辑</button> <button onclick="deleteClassroom(${index})">删除</button>`;
    });
  }

  // 添加教室
  function addClassroom() {
    const number = document.getElementById('classroom-number').value;
    const capacity = parseInt(document.getElementById('classroom-capacity').value);
    if (number && capacity) {
      classrooms.push({ number, capacity });
      saveData();
      renderClassrooms();
      document.getElementById('classroom-number').value = '';
      document.getElementById('classroom-capacity').value = '';
    }
  }

  // 编辑教室
  function editClassroom(index) {
    const newNumber = prompt('请输入新的教室编号', classrooms[index].number);
    const newCapacity = parseInt(prompt('请输入新的教室容量', classrooms[index].capacity));
    if (newNumber && newCapacity) {
      classrooms[index].number = newNumber;
      classrooms[index].capacity = newCapacity;
      saveData();
      renderClassrooms();
    }
  }

  // 删除教室
  function deleteClassroom(index) {
    if (confirm('确定要删除该教室吗？')) {
      classrooms.splice(index, 1);
      saveData();
      renderClassrooms();
    }
  }

  // 初始化页面
  openTab('home');
</script>
</body>

</html>
